<template>
	<view class="content">
		<cu-custom :isBack="true">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>

		<view class="from-box">
			<input type="text" value="" v-model="fromData.name" placeholder="请填写您的真实姓名" class="from-item" />
			<input type="text" value="" v-model="fromData.class" placeholder="请填写您的院系、班级" class="from-item" />
			<input type="number" value="" v-model="fromData.phone" placeholder="请填写您的手机号" class="from-item" />
			<view class="gender-box flex justify-between ">
				<view class="gender-item middle " @click="select(0)" :class="fromData.gender==0?'hover':'nohover'">
					♂ 我是男生
				</view>
				<view class="gender-item middle " @click="select(1)" :class="fromData.gender==1?'hover':'nohover'">
					♀ 我是女生
				</view>

			</view>

			<view class="desc-box">
				<textarea value="" class="desc" placeholder="撰写个人简介，以便我们更好得了解你（选填）" maxlength="300"
					v-model="fromData.desc" />
				<text class="zishu text-gray">{{fromData.desc.length}}/300</text>
			</view>
		</view>

		<view class="bottom-box flex flex-direction">
			<view class="middle text">社团管理员会尽快与您取得联系，请耐心等待</view>
			<view class="btn-box round middle" @click="sumbit()">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {

			return {
				title: "入驻申请",
				fromData: {
					name: "",
					class: "",
					phone: "",
					gender: 0,
					desc: "",
					club_id: "",
				}
			}

		},
		onLoad(option) {
			
			this.fromData.club_id = option.club_id;
			
		},
		methods: {

			select(val) {
				this.fromData.gender = val;

			},
			sumbit() {
				let dat = this.fromData;
				let d = {};
				for (let u in dat) {
					let isPass = this.verify(u, dat);
					if (!isPass) {
						return false;
					}

				}
				this.apiRequest('/buyer/ClubEnroll', this.fromData, 1, "post").then(res => {
					this.msg(res.msg);
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				}).catch(() => {
					this.msg("申请失败，请稍后再试");
				})
			},
			/**
			 * 验证表达式
			 */
			verify(...dat) {
				let val = true,
					da = dat[1][dat[0]];
				switch (dat[0]) {
					case "name":
						if (da.length == 0) {
							this.msg("请输入姓名");
							val = false;
						}
						break;

					case "class":
						if (da.length == 0) {
							this.msg("请输入您的院系、班级");
							val = false
						}
						break;

					case "phone":
						if (!RegExp(/^1[3456789]\d{9}$/).test(da)) {
							this.msg("手机号格式错误");
							val = false
						}
						break;
				}
				return val
			},
			msg(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				})

			}





		}




	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;

		.from-box {
			margin: 0 calc(100vw*(40/750));
			width: calc(100vw*(670/750));

			.from-item {
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				width: calc(100vw*(670/750));
				height: calc(100vw*(100/750));
				border-radius: calc(100vw*(20/750));
				font-size: calc(100vw*(32/750));
				margin-top: calc(100vw*(30/750));
				font-weight: 500;
				color: #999999;
				padding-left: 30rpx;
			}

			.gender-box {
				width: 100%;
				margin-top: calc(100vw*(30/750));

				.gender-item {
					width: calc(100vw*(320/750));
					height: calc(100vw*(100/750));

					font-weight: 800;
					border-radius: 20rpx;
					font-size: calc(100vw*(36/750));


				}

				.hover {
					background: #FFFFFF;
					border: 4rpx solid #1270E0;
					color: #1270E0;
				}

				.nohover {
					background: #F7F7F7;
					color: #999999;
					border: 2rpx solid #DBDBDB;
				}

			}

			.desc-box {
				margin-top: calc(100vw*(30/750));
				width: inherit;
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
				border-radius: 20rpx;
				position: relative;

				.desc {
					width: inherit;
					height: calc(100vw*(312/750));
					padding: 36rpx 30rpx;
					font-size: calc(100vw*(28/750));
					font-weight: 500;
					color: #999999;
					line-height: calc(100vw*(50/750));
				}

				.zishu {
					position: absolute;
					float: right;
					right: 1%;
					bottom: 1%;

				}

			}


		}


		.bottom-box {
			width: calc(100vw*(670/750));
			position: absolute;
			margin: 0 calc(100vw*(40/750));
			bottom: calc(100vw*(40/750));

			.text {
				font-size: calc(100vw*(24/750));
				font-weight: 500;
				color: #999999;
			}

			.btn-box {
				margin-top: 40rpx;
				width: inherit;
				height: calc(100vw*(100/750));
				font-size: calc(100vw*(32/750));
				background: #1270E0;
				font-weight: 800;
				color: #FFFFFF;
			}
		}

	}
</style>
